<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ladybird - 我的订单</title>

        <!-- 头部导航 -->
        <%@include file="top-link.jsp" %>
    </head>
    <body>

        <%--        头部导航栏--%>
        <%@include file="top-nav.jsp" %>

        <!--个人信息开始-->
        <div class="layui-container" style="margin-top: 40px;margin-left: 50px;width: 1550px">
            <div class="layui-row">
                <div class="layui-col-md3">
                    <ul class="layui-nav layui-nav-tree ">
                        <li class="layui-nav-item"><span style="font-size: 22px;padding: 10px">我的票虫</span></li>
                        <li class="layui-nav-item">
                            <span style="font-size: 18px;padding: 15px">交易中心</span>
                            <dl>
                                <dd class="layui-this"><a href="">&gt; 订单管理</a></dd>
                            </dl>
                        </li>
                        <li class="layui-nav-item">
                            <span style="font-size: 18px;padding: 15px">账户中心</span>
                            <dl>
                                <dd>
                                    <a href="${pageContext.request.contextPath}/api/v1/pri/user/do/reset-pwd">&gt;
                                        修改密码</a>
                                </dd>
                                <dd><a href="${pageContext.request.contextPath}/api/v1/pri/user/do/personal">&gt;
                                    个人信息</a></dd>
                                <dd><a href="${pageContext.request.contextPath}/api/v1/pri/user/buyerticket-list">&gt;
                                    常用购票人</a>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="layui-col-md9" style="margin-left: -120px">
                    <div class="layui-card">
                        <div class="layui-card-header layui-bg-cyan">我的票虫</div>
                        <div class="layui-card-body layui-bg-green">订单管理</div>
                        <div style="padding: 20px; background-color: #F2F2F2;">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-body ">
                                            <form class="layui-form" action="" lay-filter="example">
                                                <div class="layui-form-item" style="width: 220px">
                                                    <div style="width: 1070px">
                                                        <table class="layui-table">
                                                            <thead>
                                                                <tr>
                                                                    <th>订单编号</th>
                                                                    <th>订单创建时间</th>
                                                                    <th>票品名称</th>
                                                                    <th>票品时间</th>
                                                                    <th>票品场馆</th>
                                                                    <th>座位号码</th>
                                                                    <th>订单金额</th>
                                                                    <th>订单状态</th>
                                                                    <th>订单操作</th>
                                                                </tr>
                                                                <c:forEach items="${jsonData.data.list}" var="u"
                                                                           varStatus="status">
                                                            <tbody id="tb_order">

                                                                <tr>
                                                                    <td>${u.orderNumber}</td>
                                                                    <td><fmt:formatDate value="${u.createTime}"
                                                                                        var="createTime"
                                                                                        pattern="yyyy-MM-dd HH:mm:ss"/>${createTime}</td>
                                                                    <td>${u.ticketDetailsInfo}</td>
                                                                    <td><fmt:formatDate value="${u.ticketTime}"
                                                                                        var="ticketTime"
                                                                                        pattern="yyyy-MM-dd "/>${ticketTime}</td>
                                                                    <td>${u.ticketAddressVenue}</td>
                                                                    <td>${u.seats}</td>
                                                                    <td>${u.orderInfoTotalPrice}</td>
                                                                    <td><c:if
                                                                            test="${u.orderInfoStatus == 1}">已支付</c:if>
                                                                        <c:if test="${u.orderInfoStatus == 0}">未支付</c:if>
                                                                        <c:if test="${u.orderInfoStatus == 2}">未支付</c:if>
                                                                    </td>
                                                                    <td>
                                                                        <c:if test="${u.orderInfoStatus == 0}">
                                                                            <a href="${pageContext.request.contextPath}/api/v1/pri/common/to-alipay?orderInfoId=${u.orderInfoId}" target="_blank">
                                                                                <button type="button"
                                                                                        class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">
                                                                                    去付款
                                                                                </button>
                                                                            </a>
                                                                        </c:if>
                                                                        <c:if test="${u.orderInfoStatus == 1}">
                                                                            <button type="button"
                                                                                    onclick="ajax_del(this,${u.orderInfoId})"
                                                                                    class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">
                                                                                删除订单
                                                                            </button>
                                                                        </c:if>
                                                                        <c:if test="${u.orderInfoStatus == 2}">
                                                                            <button type="button"
                                                                                    class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">
                                                                                已关闭
                                                                            </button>
                                                                        </c:if>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                            </c:forEach>
                                                        </table>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div style="margin-top: 30px;text-align: center">

                                    <div class="layui-laypage">
                                        <a href="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=${jsonData.data.prePage}&pageSize=${jsonData.data.pageSize}"
                                           class="layui-laypage-prev">
                                            上一页
                                        </a>
                                        <%--                                                分页--%>

                                        <c:choose>
                                            <c:when test="${jsonData.data.pages <= 3}">
                                                <c:set var="begin" value="1"/>
                                                <c:set var="end" value="${jsonData.data.pages}"/>
                                            </c:when>
                                            <%--页数超过了4页--%>
                                            <c:otherwise>
                                                <c:set var="begin" value="${jsonData.data.pageNum}"/>
                                                <c:set var="end" value="${jsonData.data.pageNum + 3}"/>

                                                <%--如果end超过最大页,设置起始页=最大页-3--%>
                                                <c:if test="${end > jsonData.data.pages}">
                                                    <c:set var="begin" value="${jsonData.data.pages - 3}"/>
                                                    <c:set var="end" value="${jsonData.data.pages}"/>
                                                </c:if>
                                            </c:otherwise>
                                        </c:choose>

                                        <%--遍历--%>

                                        <c:forEach begin="${begin}" end="${end}" varStatus="status">
                                            <a style="padding: 0px"
                                               href="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=${status.index}&pageSize=${jsonData.data.pageSize}"
                                               data-page="${status.index}">
                                                <c:if test="${status.index == jsonData.data.pageNum}">
                                                                <span class="layui-laypage-curr" style="width: 4px"><em
                                                                        class="layui-laypage-em"></em><em>${status.index}</em></span>
                                                </c:if>

                                                <c:if test="${status.index != jsonData.data.pageNum}">
                                                    <span>${status.index}</span>
                                                </c:if>
                                            </a>
                                        </c:forEach>

                                        <%--                                                分页--%>

                                        <c:if test="${jsonData.data.nextPage == 0}">
                                            <a href="#">下一页</a>
                                        </c:if>
                                        <c:if test="${jsonData.data.nextPage != 0}">
                                            <a class="layui-laypage-next"
                                               href="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=${jsonData.data.nextPage}&pageSize=${jsonData.data.pageSize}">
                                                下一页
                                            </a>
                                        </c:if>
                                    </div>
                                    <br>
                                    <p> 总共 ${jsonData.data.pages} 页，共 ${jsonData.data.total}
                                        条数据，当前在第 ${jsonData.data.pageNum} 页


                                        <select class="form-control" onchange="window.location=this.value;">
                                            <c:if test="${jsonData.data.pageSize == 2}">
                                                <option selected>
                                                    2
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=4">
                                                    4
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=6">
                                                    6
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=8">
                                                    8
                                                </option>
                                            </c:if>
                                            <c:if test="${jsonData.data.pageSize == 4}">
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=2">
                                                    2
                                                </option>
                                                <option selected>
                                                    4
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=6">
                                                    6
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=8">
                                                    8
                                                </option>
                                            </c:if>
                                            <c:if test="${jsonData.data.pageSize == 6}">
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=2">
                                                    2
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=4">
                                                    4
                                                </option>
                                                <option selected>
                                                    6
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=8">
                                                    8
                                                </option>
                                            </c:if>
                                            <c:if test="${jsonData.data.pageSize == 8}">
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=2">
                                                    2
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=4">
                                                    4
                                                </option>
                                                <option value="${pageContext.request.contextPath}/api/v1/pri/user/order?pageNum=1&pageSize=6">
                                                    6
                                                </option>
                                                <option selected>
                                                    8
                                                </option>
                                            </c:if>
                                        </select>
                                    </p>
                                    <br>

                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--个人信息结束-->

        <!-- 尾部导航 -->
        <%@include file="foot-nav.jsp" %>

        <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/layui/layui.js"></script>
        <script type="text/javascript">
            layui.use('element', function () {
                var element = layui.element;

            });
            layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form,
                    layer = layui.layer,
                    laydate = layui.laydate;

            });
        </script>
        <script>
            layui.use(['laypage', 'layer'], function () {
                var laypage = layui.laypage,
                    layer = layui.layer;

                //总页数低于页码总数
                laypage.render({
                    elem: 'demo0',
                    count: 50 //数据总数
                });

                //调用分页
                laypage.render({
                    elem: 'demo20',
                    count: data.length,
                    jump: function (obj) {
                        //模拟渲染
                        document.getElementById('biuuu_city_list').innerHTML = function () {
                            var arr = [],
                                thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<li>' + item + '</li>');
                            });
                            return arr.join('');
                        }();
                    }
                });

            });
        </script>
        <script src="https://oos.icanci.cn/app/static/webapps/ladybird-web-static/user/js/jquery-2.2.3.min.js"></script>
        <script>
            function ajax_del(obj, orderInfoId) {
                let tbody = document.getElementById("tb_order");
                $.ajax({
                    type: 'post',
                    url: '/api/v1/pri/user/json/del-order',
                    data: "orderInfoId=" + orderInfoId,
                    success: function (data) {
                        if (data.code == 0) {
                            let tr = obj.parentElement.parentElement;
                            tr.parentNode.innerHTML = ''
                        } else {
                            alert(data.msg)
                        }
                    }
                })
            }
        </script>
    </body>
</html>
